<template>
  <div class="Bottom">
    <div model="horizontal" class="layout-bottom">
      <Row>
        <Col span="2" class="muise-bg">
          <img src="../../assets/muise-bg.jpg" alt="">
        </Col>
        <Col span="4" class="muise-btn">
          <Button shape="circle" type="primary" icon="md-skip-backward"></Button>
          <Button size="large" shape="circle" type="primary" :icon=playIcon @click="playSwitch"></Button>
          <Button shape="circle" type="primary" icon="md-skip-forward"></Button>
          <Button shape="circle" type="primary" icon="ios-repeat"></Button>
        </Col>
        <Col span="12" class="text-left slider">
          <p>流光记</p>
          <Slider v-model="value1"></Slider>
        </Col>
        <!--<Col span="4" class="muise-btn">-->
        <Col span="4" class="muise-btn">
          <Button shape="circle" type="primary" icon="md-heart-outline"></Button>
          <!--调节音量-->
          <Poptip placement="top">
            <Button shape="circle" type="primary" :icon="voiceIcon"></Button>
            <div slot="content">
              <Slider v-model="voiceSize" :tip-format="hideFormat" @on-change="adjustVoice"/>
            </div>
          </Poptip>
          <Button shape="circle" type="primary" icon="ios-trash-outline"></Button>
        </Col>

        <Col span="1" >
          <!--列表框-->
          <div class="top" v-show="true">
            <Poptip title="歌曲列表" placement="top">
              <Button>
                <Icon type="ios-menu" size="30"/>
              </Button>
              <div slot="content">
                <div v-for="(item,index) in songList" :key="index">
                  {{item.name}}  -  {{item.author}}
                </div>
              </div>
            </Poptip>
          </div>
        </Col>

      </Row>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        value1: 2,
        voiceShow:true,  //点击音量展示
        voiceSize:50, //音量打下
        playIcon:"ios-play",  //播放图标
        voiceIcon:"md-volume-up",  //喇叭图标
        playArr:[
          "md-pause",
          "ios-play"
        ],
        voiceArr:[
          "md-volume-up",
          "md-volume-off"
        ],
        songList:[
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
          {"name":"流光记",author:"银临"},
        ],  //歌曲列表
      }
    },
    methods:{
      //音量滑块变化
      adjustVoice(value){
        console.log("size",value);
        if(value == 0){
          this.voiceIcon = this.voiceArr[1];
        }else{
          this.voiceIcon = this.voiceArr[0];
        }
      },
      hideFormat () {
        //隐藏音量调剂数字显示
        return null;
      },
      playSwitch(){
        //切换 播放/暂停
        if(this.playArr[0] == this.playIcon){
          this.playIcon = this.playArr[1];
        }else{
          this.playIcon = this.playArr[0];
        }
      }
    }
  }

</script>

<style>
  .layout-bottom{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 79px;
    line-height: 79px;
    border-top: 1px #ddd solid;
    background: #fff;
  }
  .muise-bg {
    text-align: left;
  }
  .muise-bg img{
    width: 80px;
    height: 80px;
  }
  .muise-btn button{
    margin-left: 10px;
    background: #C62F2F;
    border: 0;
  }
  .muise-btn button:hover{
    background: #eb5252;
    border: 0;
  }
  .text-left{
    text-align: left;
  }
  .slider{
    padding: 5px;
    line-height: 20px;
  }
  .ivu-slider-bar{
    background: #C62F2F;
  }
  .ivu-slider-button{
    border-color: #C62F2F;
  }
  .ivu-slider-button:hover{
    border-color: #C62F2F;
  }
  .top{
    text-align: center;
  }
</style>

